<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            height: 770px;
            width: 1535px;
            background-color: #f5f5f5;
            margin: 0 auto;
        }

        .box1 {
            height: 768px;
            width: 283px;
            background-color: #fff;

        }

        .box2 {
            width: 283px;
            height: 370px;
            background-color: #fff;
            margin: 0 0 30px 30px;
        }

        .box3 {
            width: 283px;
            height: 170px;
            background-color: #fff;
            margin: 0 0 30px 30px;
        }

        .box1:hover,
        .box2:hover,
        .box3:hover {
            box-shadow: 5px 5px 5px rgb(8, 10, 7, 0.1);
        }

        .box1 img {
            width: 283px;
        }

        .box2 img {
            width: 250px;
            align-items: center;
            margin: 0 16px;
        }

        .box3 img {
            width: 100px;

            display: inline-block;
        }


        .a1 {
            height: 300px;
            width: 234px;
            padding: 20px 0;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .title {
            width: 1535px;
            height: 100px;
            margin: 0 auto;
            color: #333333;
            line-height: 100px;
        }

        .zhineng {
            font-size: 23px;
        }

        .title2 {

            margin: 0 0 0 30px;

        }

        .title .title2 a {
            text-decoration: none;
            color: #333333;
        }

        .title .title2 a:hover {
            text-decoration: none;
            color: #ff6700;
            border-bottom: 2px solid #ff6700;
        }

        a {
            text-decoration: none;
        }

        .p1 {
            font-size: 16px;
            color: #333333;
            text-align: center;
            margin: 0 12px 2px;
        }

        .p2 {
            font-size: 14px;
            color: #b0b0b0;
            text-align: center;
            margin: 0 10px 15px;
        }

        .p3 {
            text-align: center;
            font-size: 16px;
            color: #ff6700;
            margin: 0 10px 15px;
        }

        .p1-1 {

            font-size: 16px;
            color: #333333;
            margin: 0 12px 2px;
        }

        .p1-2 {

            font-size: 14px;
            color: #b0b0b0;
            margin: 0 10px 15px;
        }

        .p1-3 {

            font-size: 16px;
            color: #ff6700;
            margin: 0 10px 15px;
        }

        span {
            display: inline-block;
            margin: 15px 10px;
        }

        .more {
            font-size: 40px;
            font-weight: 700;
            color: #ff6700;
            height: 170px;
            line-height: 170px;
            margin-left: 30px;
        }
    </style>
</head>

<body>
    <div class="title">
        <div class="left zhineng">智能穿戴</div>
        <div class="right title2"><a href="">热门</a></div>
        <div class="right title2"><a href="">穿戴</a></div>
    </div>


    <div class="box">
        <div class="box1 left"><a href="#"><img src="img2/3/1.webp" alt=""></a></div>
        <div class="box2 left"><a href="#"><img src="img2/3/2.webp" alt="">
                <p class="p1">小米手环6</p>
                <p class="p2">全屏实力</p>
                <p class="p3">209元</p>
            </a></div>
        <div class="box2 left"><a href="#"><img src="img2/3/3.webp" alt="">
                <p class="p1">小米手环5 NFC版</p>
                <p class="p2">多功能NFC 11种运动模式</p>
                <p class="p3">199元</p>
            </a></div>
        <div class="box2 left"><a href="#"><img src="img2/3/4.webp" alt="">
                <p class="p1">小米手环5</p>
                <p class="p2">磁吸式充电</p>
                <p class="p3">169元</p>
            </a></div>
        <div class="box2 left"><a href="#"><img src="img2/3/5.webp" alt="">
                <p class="p1">Redmi AirDots 3真无线蓝牙耳机</p>
                <p class="p2">圈铁音质, 超长续航</p>
                <p class="p3">199元</p>
            </a></div>
        <div class="box2 left"><a href="#"><img src="img2/3/6.webp" alt="">
                <p class="p1">小米真无线蓝牙耳机Air 2 Pro</p>
                <p class="p2">主动降噪/特久续航/无线充</p>
                <p class="p3">399元</p>
            </a></div>
        <div class="box2 left"><a href="#"><img src="img2/3/7.webp" alt="">
                <p class="p1">小米真无线蓝牙耳机Air2 sE</p>
                <p class="p2">放肆用,畅快听</p>
                <p class="p3">129元</p>
            </a></div>
        <div class="box2 left"><a href="#"><img src="img2/3/8.webp" alt="">
                <p class="p1">Xiaomi Watch S1</p>
                <p class="p2">腕事具备</p>
                <p class="p3">1099元起</p>
            </a></div>

        <div class="box3 left"><a href="#">
                <span>
                    <p class="p1-1">Redmi Buds 3
                    </p>
                    <p class="p1-2">青春版</p>
                    <p class="p1-3">99元</p>
                </span>
                <span>
                    <img src="img2/3/9.webp" alt="">
                </span>
            </a></div>
        <div class="box3 left"><a href="#" class="more">查看更多-></a></div>


    </div>
</body>

</html>